<template>
  <!-- 预订--新增--详情页 -->
  <view class="form">
    <view class="cen-box">
      <u--form
        labelPosition="left"
        :model="bookform"
        ref="bookCheck"
        labelWidth="160"
      >
        <view class="jc">
          <view class="head">基础资料</view>
          <u-form-item
            label="预订类型"
            borderBottom
            prop="bookform.BookTypeTwo"
          >
            <u--input
              :disabled="true"
              v-model="bookform.BookTypeTwo"
              placeholder="请选择预订类型"
            ></u--input>
          </u-form-item>
          <u-form-item
            label="入住类型"
            borderBottom
            prop="bookform.ReceiveClassTwo"
            @click="ReceiveClassClick"
          >
            <u--input
              v-model="bookform.ReceiveClassTwo"
              placeholder="请选择入住类型"
            ></u--input>
            <template #right>
              <u-icon name="arrow-right"></u-icon>
            </template>
          </u-form-item>
          <u-form-item
            label="入住天数"
            borderBottom
            prop="bookform.Days"
            v-if="bookform.ReceiveClass != 1"
          >
            <u-number-box
              button-size="60"
              inputWidth="200"
              v-model="bookform.Days"
            ></u-number-box>
            <!-- <text style="margin-left: 20rpx;">天</text> -->
          </u-form-item>
          <u-form-item
            label="入住时长"
            borderBottom
            prop="bookform.Days"
            v-else
          >
            <u-number-box
              button-size="60"
              inputWidth="200"
              v-model="bookform.Days"
            ></u-number-box>
            <!-- <text style="margin-left: 20rpx;">小时</text> -->
          </u-form-item>
          <u-form-item label="抵离时间" borderBottom prop="dateTimeOptions">
            <!-- <u--input v-model="dateTimeOptions[0]" placeholder="请选择抵离时间"></u--input> -->
            <uni-datetime-picker
              v-model="dateTimeOptions"
              :border="false"
              type="daterange"
              :start="dateTimeOptions[0]"
              rangeSeparator="/"
            />
          </u-form-item>
          <u-form-item
            label="客源类型"
            borderBottom
            prop="bookform.TheClass"
            @click="TheClassClick"
          >
            <u--input
              v-model="bookform.TheClass"
              placeholder="请选择客源类型"
            ></u--input>
            <template #right>
              <u-icon name="arrow-right"></u-icon>
            </template>
          </u-form-item>
        </view>
        <view class="jc">
          <view class="head">客人信息</view>
          <u-form-item label="姓名" borderBottom prop="bookform.Name">
            <u--input
              v-model="bookform.Name"
              placeholder="请输入姓名"
            ></u--input>
          </u-form-item>
          <u-form-item label="手机号" borderBottom prop="bookform.Tel">
            <u--input
              v-model="bookform.Tel"
              placeholder="请输入手机号"
            ></u--input>
          </u-form-item>
        </view>
        <view class="jc" v-for="(item, index) in bookform.BookNum" :key="index">
          <view class="head">
            <view class="">房间信息{{ index + 1 }}</view>
            <u-icon name="trash" @click="deleteRoom(index)"></u-icon>
          </view>
          <u-form-item
            label="预订房型"
            borderBottom
            prop="item.RoomClassId"
            @click="RoomClassClick(item, index)"
          >
            <u--input
              v-model="item.RoomClassName"
              placeholder="请选择房型"
            ></u--input>
            <template #right>
              <u-icon name="arrow-right"></u-icon>
            </template>
          </u-form-item>
          <u-form-item label="预订间数" borderBottom prop="item.Num">
            <u-number-box
              :min="0"
              button-size="60"
              inputWidth="200"
              v-model="item.Num"
            ></u-number-box>
          </u-form-item>
          <u-form-item
            label="排房"
            borderBottom
            prop="item.UsedRooms"
            @click="AssignRoomsClick(item, index)"
          >
            <u--input
              v-model="item.UsedRooms"
              placeholder="请选择房型"
            ></u--input>
            <template #right>
              <u-icon name="arrow-right"></u-icon>
            </template>
          </u-form-item>
          <u-form-item label="实际房价" borderBottom prop="item.Price">
            <u--input
              prefixIcon="rmb"
              prefixIconStyle="font-size: 40rpx;color: #909399"
              v-model="item.Price"
              placeholder="请输入实际房价"
            ></u--input>
          </u-form-item>
          <u-form-item label="早餐" borderBottom prop="item.BreakFastNum">
            <u-number-box
              :min="0"
              button-size="60"
              inputWidth="200"
              v-model="item.BreakFastNum"
            ></u-number-box>
          </u-form-item>
        </view>
        <view class="jc btn-new" @click="Addroom">
          <u-icon
            size="32"
            color="#2891FA"
            name="plus-circle"
            label="添加房型"
            labelPos="right"
            labelSize="32"
            labelColor="#2891FA"
          ></u-icon>
        </view>
        <view class="jc">
          <view class="head">备注</view>
          <u--textarea
            style="padding: 20rpx 0"
            v-model="bookform.Note"
            height="300"
            placeholder="请输入内容"
          ></u--textarea>
        </view>
        <view class="btn-tj">
          <u-button type="primary" text="提交预订" @click="submit"></u-button>
        </view>
      </u--form>
    </view>
    <popup v-model:data="data" :dataclick="updatedata" />
    <terraces v-model:data="terracesData" :dataclick="updateroom" />
  </view>
</template>

<script lang="ts" setup>
import { reactive, toRefs, ref } from 'vue'
import {
  GetManclass,
  GetHomeClassList,
  book_Room,
  GetRoomsForAssign,
  newbook
} from '@/api/server/v1/book'
import popup from '../com/popup.vue'
import terraces from '../com/terraces.vue'
import customFormRules from './form_rules'
import { onShow } from '@dcloudio/uni-app'
import toast from '@/utils/toast'
let bookform = ref({
  BookType: 0,
  ReceiveClass: 0,
  BookTypeTwo: '普通类型',
  ReceiveClassTwo: '全天',
  TheClass: '散客',
  PaymentPrice: 0,
  Paymentstatus: '',
  Rooms: [],
  BookNum: [
    {
      RoomClassId: '',
      RoomClassName: '',
      BreakFastNum: 0, //早餐
      AssignRooms: [], //排房
      UsedRooms: '',
      Num: 0, //房间数
      NormalPrice: 0, //门市价
      Price: 0 //实际房价
    }
  ],
  VipNo: '',
  VipId: '',
  VipLev: '',
  CNo: '',
  TheCompanyId: '',
  TheCompany: '',
  TeamName: '',
  ContractNo: '',
  Name: '',
  Tel: '',
  ThirdNo: '',
  Note: '',
  XsName: '',
  Zk: '',
  ZkName: '',
  Days: '1'
})
const d = new Date()
const year = d.getFullYear()
let month = d.getMonth() + 1
month = month < 10 ? `0${month}` : month
const date = d.getDate()
let dateTimeOptions = ref([
  `${year}-${month}-${date}`,
  `${year}-${month}-${date + 1}`
])
let data = ref()
let name = ref('预订类型')
let showlei = ref<boolean>(false)
let showrili = ref<boolean>(false)
type columns_type = { name: string; value: 'Ordinary' | 'Team'; id: number }
let columns = ref<Array<columns_type>>([
  {
    name: '普通预订',
    value: 'Ordinary',
    id: 0
  },
  {
    name: '团队预订',
    value: 'Team',
    id: 1
  }
])
const ReceiveClassOptions = ref([
  {
    name: '全天',
    value: 'ALL',
    id: 0
  },
  {
    name: '钟点',
    value: 'DU',
    id: 1
  },
  {
    name: '自用|免费',
    value: 'HU',
    id: 2
  }
])
let manclass = ref([])
let classList = ref([])
//所有客类
const TheClassList = function () {
  GetManclass().then((res) => {
    manclass.value = res
  })
}
//全部房型
const homelist = function () {
  GetHomeClassList().then((res) => {
    console.log(res)
    classList.value = res
  })
}
//预订类型选择
const BookTypeClick = function () {
  showlei.value = true
  name.value = '预订类型'
  bookform.value.BookType = bookform.value.BookType || 0
  bookform.value.BookTypeTwo = bookform.value.BookTypeTwo || '普通预订'
  data.value = {
    show: showlei.value, //弹窗显示隐藏
    columns: columns.value, //选择列表
    name: name.value, //弹窗title
    value: bookform.value.BookType //选中项
  }
}
//入住类型选择
const ReceiveClassClick = function () {
  showlei.value = true
  name.value = '入住类型'
  bookform.value.ReceiveClass = bookform.value.ReceiveClass || 0
  bookform.value.ReceiveClassTwo = bookform.value.ReceiveClassTwo || '全天'
  data.value = {
    show: showlei.value,
    columns: ReceiveClassOptions.value,
    name: name.value,
    value: bookform.value.ReceiveClass
  }
}
//客源类型选择
const TheClassClick = function () {
  showlei.value = true
  name.value = '客源类型'
  bookform.value.TheClass = bookform.value.TheClass || '散客'
  data.value = {
    show: showlei.value,
    columns: manclass.value,
    name: name.value,
    value: bookform.value.TheClass
  }
}
let roomclickAn = ref()
//房型选择
const RoomClassClick = function (item, index) {
  console.log(bookform.value.BookNum)
  roomclickAn.value = item
  showlei.value = true
  name.value = '预订房型'
  item.RoomClassId = item.RoomClassId || ''
  data.value = {
    show: showlei.value,
    columns: classList.value,
    name: name.value,
    value: item.RoomClassId,
    selected: bookform.value.BookNum
  }
}
let roomdata: book_Room = reactive({
  HomeClassId: '',
  CheckIn: '',
  CheckOut: '',
  BookId: ''
})
let terracesData = ref()
let terracesShow = ref(false)
//排房
const AssignRoomsClick = function (item, index) {
  if (item.RoomClassId == '') {
    toast.$toast('请选择房型，再进行排房')
  } else if (item.Num < 1) {
    toast.$toast('请选择预订间数')
  } else {
    const HomeClassId = item.RoomClassId
    const CheckIn = dateTimeOptions.value[0]
    const CheckOut = dateTimeOptions.value[1]
    GetRoomsForAssign({
      ...roomdata,
      HomeClassId,
      CheckIn,
      CheckOut
    }).then((res) => {
      if (res.FreeRooms.length > 0) {
        terracesShow.value = true
        terracesData.value = {
          name: '排房',
          show: terracesShow.value,
          roomList: res.FreeRooms,
          RoomClassName: item.RoomClassName,
          AssignRooms:
            res.UsedRooms.length > 0 ? res.UsedRooms : item.AssignRooms,
          Num: item.Num || 0,
          index: index
        }
      } else {
        toast.$toast('当前房型没有房间可预定')
      }
    })
  }
}
//排房更新
const updateroom = function (params) {
  terracesData.value = params
  bookform.value.BookNum[params.index].UsedRooms = params.AssignRooms.toString()
  bookform.value.BookNum[params.index].AssignRooms = params.AssignRooms
}
//删除房型
const deleteRoom = function (index) {
  bookform.value.BookNum.splice(index, 1)
}
//新增房型
const Addroom = function () {
  bookform.value.BookNum.push({
    RoomClassId: '',
    RoomClassName: '',
    BreakFastNum: 0, //早餐
    AssignRooms: [], //排房
    UsedRooms: '',
    Num: 0, //房间数
    NormalPrice: 0, //门市价
    Price: 0 //实际房价
  })
}
//关闭单选弹窗，修改对应选择
const updatedata = function (params) {
  console.log(params)
  if (name.value == '预订类型') {
    data.value = params
    bookform.value.BookType = params.value
    bookform.value.BookTypeTwo = params.columns.filter((e: columns_type) => {
      return e.id === params.value
    })[0].name
  }
  if (name.value == '入住类型') {
    data.value = params
    bookform.value.ReceiveClass = params.value
    bookform.value.ReceiveClassTwo = params.columns.filter(
      (e: columns_type) => {
        return e.id === params.value
      }
    )[0].name
  }
  if (name.value == '客源类型') {
    data.value = params
    bookform.value.TheClass = params.value
  }
  if (name.value == '预订房型') {
    if (params.value != '') {
      data.value = params
      roomclickAn.value.RoomClassId = params.value
      roomclickAn.value.RoomClassName = classList.value.filter(
        (e: columns_type) => {
          return params.value == e.Id
        }
      )[0].Name
      roomclickAn.value.NormalPrice = roomclickAn.value.Price =
        classList.value.filter((e: columns_type) => {
          return params.value == e.Id
        })[0].NormalPrice
    }
  }
}
//提交
const submit = function () {
  // newbook
  if (bookform.value.Name == '') {
    toast.$toast(`请输入客人信息！`)
  } else if (
    (bookform.value.TheClass == '会员' || bookform.value.TheClass == '协议') &&
    bookform.value.Zk == ''
  ) {
    toast.$toast(`请填写${bookform.value.TheClass}信息！`)
  } else if (
    dateTimeOptions.value == null ||
    dateTimeOptions.value.length < 2
  ) {
    toast.$toast(`请填写抵离信息！`)
  } else {
    let data = {
      BookNum: bookform.value.BookNum,
      BreakfastNum: bookform.value.BreakfastNum, //早餐数
      CheckIn: dateTimeOptions.value[0], //开始时间
      CheckOut: dateTimeOptions.value[1], //结束时间
      Days: bookform.value.Days, //天数
      Dinner: 0,
      Lunch: 0,
      XsName: '', //销售员
      Name: bookform.value.Name, //预约人
      ReceiveClass: bookform.value.ReceiveClass, //入住类型
      ReceiveInClass: bookform.value.ReceiveClass, //入住类型
      TheClass: bookform.value.TheClass, //客源类型
      VipNo: bookform.value.VipNo, //会员的手机号
      VipId: bookform.value.VipId, //会员id
      VipLev: bookform.value.VipLev, //会员等级
      TheCompany: bookform.value.TheCompany, //协议单位名称
      TheCompanyId: bookform.value.TheCompanyId || 0, //协议单位名称
      ThirdNo: bookform.value.ThirdNo, //外部单号
      Note: bookform.value.Note, //备注
      Zk: bookform.value.Zk, //备注
      BookType: bookform.value.BookType, //预订类型
      TeamName: bookform.value.TeamName, //团队名称
      PaymentPrice: bookform.value.PaymentPrice || 0, // 公付费用
      ContractNo: bookform.value.ContractNo, //合同号
      Tel: bookform.value.Tel //手机号
    }
    console.log(data)
    newbook(data).then(() => {
      toast.$toast(`预订成功！`)
      uni.switchTab({
        url: '/pages/bookList/index'
      })
    })
  }
}
// api
onShow(() => {
  console.log(bookform.value)
  TheClassList()
  homelist()
})
</script>

<style lang="scss" scoped>
//
.form {
  background-color: #f7f8fa;
  height: calc(100vh - 44px);
  overflow-y: auto;

  .cen-box {
    height: 100%;

    .jc {
      background-color: #fff;
      margin: 24rpx 0;
      padding: 32rpx;

      .head {
        color: #84878c;
        display: flex;
        justify-content: space-between;
        font-size: 32rpx;
        font-family: SourceHanSansCN-Regular, SourceHanSansCN-Regular;
        font-weight: normal;
        color: #84878c;
      }
    }

    .btn-tj {
      background-color: #fff;
      margin: 80rpx 0;
      padding: 32rpx;
      font-size: 36rpx;
      font-weight: normal;
      color: #ffffff;
    }

    .btn-new {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 32rpx;
      color: #2891fa;
    }
  }
}
</style>
